<template>
  <div class="mainDiv">
    <div>
      <el-container class="el-container">
        <el-aside width="280px" class="el-aside">
          <div style="text-align: center">
            <el-avatar :src="userImage" shape="circle" :size="60" class="avatar"></el-avatar>
            <h5>账户: {{account}}</h5>
            <h5>密码: {{password}}</h5>
          </div>
          <div class="menu">
            <h4>菜单列表</h4>
            <el-menu
                active-text-color="#ffd04b"
                background-color="#2c3e50"
                class="el-menu-vertical-demo"
                default-active="1"
                text-color="#fff"
            >
              <el-menu-item index="1" @click="showList = applyList">
                <span>待处理</span>
              </el-menu-item>
              <el-menu-item index="2" @click="showList = handledList">
                <span>处理记录</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-aside>

        <el-main class="el-main">
          <div class="function">
            <div style="float: left">
              <el-checkbox
                  v-for="checkItem in checkList"
                  :label = checkItem
                  v-model="selectList"
                  @change="getSelected">

              </el-checkbox>
<!--              <el-checkbox label="学者认领" change=""/>-->
<!--              <el-checkbox label="上传论文" />-->
<!--              <el-checkbox label="修改论文" />-->
<!--              <el-checkbox label="删除论文" />-->
            </div>
          </div>

          <el-divider style="margin-top: 40px; position: relative"></el-divider>

          <div class="listDiv">
            <el-empty v-if="showList.length === 0"></el-empty>
            <el-row v-else>
              <el-col :span="11" v-for="(item, i) in showList" class="colDiv">
                <div class="col-top">
                  <div class="div1">{{item.type}}</div>
                  <div class="div2">
                    <div>
                      <div style="float: left;">申请人: {{item.author}}</div>
                      <div style="float: right">申请时间: {{item.applyDate}}</div>
                    </div>
                    <div>
                      <div style="float: left">申请内容：XXXX</div>
                      <el-button type="text" style="float: right" @click="getApplyInfo(item.applyId)">查看详情</el-button>
                    </div>
                  </div>
                  <div class="div3">
                    <el-radio v-model="item.isPermitted"
                              label="1" border size="medium"
                              style="width: 80px">通过</el-radio>
                    <br/>
                    <el-radio v-model="item.isPermitted"
                              label="2" border size="medium"
                              style="width: 80px;margin-top: 10px">不通过</el-radio>
                  </div>
                </div>
<!--                <el-divider style="margin-top: 90px;"></el-divider>-->
                <br/><br/><br/><br/>
                <div class="col-bottom">
                  <el-form :inline="true">
                    <el-form-item label-width="200px">
                      <el-input v-model="item.reason"
                                :rows="2" type="textarea"
                                placeholder="理由"
                                style="margin-top: 10px"></el-input>
<!--                      <el-input v-model="item.other"-->
<!--                                :rows="1" type="textarea"-->
<!--                                placeholder="备注"-->
<!--                                style="margin-top: 10px"></el-input>-->
                    </el-form-item>
                    <el-form-item style="height: 40px;">
                      <el-button type="primary" plain @click="verify(item)">提交</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-main>
      </el-container>
    </div>

    <el-dialog v-if="isShowInfo">
      <div v-if="showInfo.type === 'claim'"></div>
      <div v-else-if="showInfo.type === 'delete'"></div>
      <div v-else></div>
    </el-dialog>
  </div>
</template>

<script>
import userImage from './userImage.jpeg'
import axios from "axios";
export default {
  name: "Admin_main",
  created() {
    /* 查看申请列表 */
    console.log('get apply list');
    /*this.axios.post("/api/manager/apply/list", {
      manageId: this.manageId
    }).then(res => {
      console.log(res);
      this.applyList = res.data.data;*/
      for (let item of this.applyList) {
        item.isPermitted = null;
        item.isShow = true;
        item.reason = '';
      }
    /*}).catch(err => {
      console.log(err);
    });*/

    this.showList = this.applyList;
  },
  // computed: {
  //   isShowIndex: function () {
  //     return this.showList.filter((item) => {
  //       return item.isShow;
  //     })
  //   }
  // },
  data() {
    return {
      //type: '',
      showList: [],     // menu选择查看的列表
      isShowInfo: false,    // 是否显示申请详情
      showInfo: {},         // 显示的申请详情
      checkList: ['学者认领', '上传论文', '修改论文', '删除论文'],
      selectList: [],

      managerId: '',
      userImage: userImage,
      account: 'jds127827',
      password: '123456789',

      applyList: [
        {
          applyId: 'apply01',
          author: 'author01',
          type: '学者认领',
          applyDate: '2021-12-12',
          title: null,
        },
        {
          applyId: 'apply02',
          author: 'author02',
          type: '上传论文',
          applyDate: '2021-12-12',
          title: '系统分析与设计课程互动式案例教学改革与实践',
        },{
          applyId: 'apply03',
          author: 'author03',
          type: '修改论文',
          applyDate: '2021-12-12',
          title: '系统分析与设计课程互动式案例教学改革与实践',
        },{
          applyId: 'apply04',
          author: 'author04',
          type: '删除论文',
          applyDate: '2021-12-12',
          title: '系统分析与设计课程互动式案例教学改革与实践',
        },
      ],

      handledList: [
        {
          applyId: 'apply01',
          author: 'author01',
          type: '学者认领',
          applyDate: '2021-12-12',
          title: null,
        },
      ],
    }
  },
  methods: {
    /** 获取申请详情 */
    getApplyInfo(applyId) {
      this.isShowInfo = true;
      /*this.axios.post("/api/apply/info", {
        applyId,
      }).then(res => {
        console.log(res);
        this.showInfo = res.data.data;
      }).catch(err => {
        console.log(err);
      })*/
    },
    /** 审核申请 */
    verify(item) {
      if (item.isPermitted === null) {
        this.$message.error('请选择通过/不通过申请');
        return;
      }
      let isPermitted = (item.isPermitted === '1');
      console.log(isPermitted + ", " + item.reason);
      /*this.axios.post("/api/apply/vertify", {
        managerId: item.manageId,
        applyId: item.applyId,
        isPermitted: isPermitted,
        reject: item.reason,
      }).then(res => {
        console.log(res);
        this.$notify.success({
          title: '已提交',
          message: '审核已成功提交',
        })
      }).catch(err => {
        console.log(err);
        this.$notify.error({
          title: '错误！',
          message: '申请不存在，请刷新后重试',
        })
      });*/
      item.isShow = false;
    },
    /** 筛选选中的类型 */
    getSelected() {

    }
  }
}
</script>

<style scoped>
.mainDiv {
  height: 600px;
}
.el-container {
  min-height: 600px;
  margin: 40px 50px 5px 30px;
}
.el-aside {
  background-color: #2c3e50;
  color: white;
}
.avatar {
  margin-top: 60px;
}
.aside h4 {
  padding-top: 30px;
}
.menu {
  margin: 80px 40px 10px 40px;
}
.el-main {
  border: 1px solid #e6f1fe;
  height: 600px;
}
.function {
  /*position: relative;*/
}
.listDiv {
  background-color: #e7e7e7;
  /*height: 500px;*/
  padding: 5px 5px 5px 20px;
}
.colDiv {
  background-color: white;
  height: 180px;
  /*border: 1px solid #bcbec2;*/
  border-radius: 5px;
  margin: 10px 18px 15px;
  padding: 5px;
  /*width: 400px;*/
}
.col-top {
  font-size: 13px;
  font-weight: bold;
}
.div1 {
  padding: 20px 10px 0 10px;
  color:#529b2e;
  text-align: center;
  float: left;
  width: 35px;
}
.div2 {
  float: left;
  margin: 15px 0 0 0;
  width: 300px;
}
.div2 div {
  padding: 0 0 10px 0;
}
.div3 {
  float:right;
  margin: 12px 0 0 5px;
}
</style>